<template>
  <div id="listImgShow" class="img-box">
    <div class="img-inner-box">
      <el-image
        fit="contain"
        :src="showImgList.showImg"
        :preview-src-list="showImgList.imgAry"
      >
      </el-image>
    </div>
    <span v-if="showNum" class="num">{{ showImgList.num }}</span>
  </div>
</template>

<script>
export default {
  name: 'listImgShow',
  msg: '列表中的视图内容-返回值为数组结构',
  props: {
    imgInfo: {
      type: [String, Array],
      default: function() {
        return ''
      }
    },
    showNum: {
      default: function() {
        return true
      }
    }
  },
  computed: {
    showImgList() {
      if (!this.imgInfo) {
        return { ...this.defaultObj }
      }
      let ary =
        typeof this.imgInfo === 'string'
          ? JSON.parse(this.imgInfo)
          : this.imgInfo
      if (ary.length > 0) {
        let imgAry = []
        for (let item of ary) {
          imgAry.push(item.url || item)
        }
        return {
          imgAry,
          showImg: imgAry[0] + '?x-oss-process=style/400x400lb',
          num: imgAry.length
        }
      } else {
        return { ...this.defaultObj }
      }
    }
  },
  data() {
    return {
      defaultObj: {
        imgAry: [],
        showImg: '',
        num: 0
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="less">
#listImgShow {
}
</style>
